<template>
  <div class="page">
    <at-card>
      <at-tabs value="2">
        <at-tab-pane label="全渠道客服营销信息" name="1" icon="icon-codepen">
          <p>Content of Tab Pane 1</p>
        </at-tab-pane>
        <at-tab-pane label="大客户预览外呼" name="2" icon="icon-codepen">
          <at-card>
            <h4 slot="title">金融云大客户预览外呼</h4>
            <div class="btn">
              <at-button icon="icon-user-plus" @click="modalA = true">
                金融云客服分派
              </at-button>
              <at-button icon="icon-package" @click="modalB = true">
                金融云业务转移
              </at-button>
              <at-button icon="icon-upload-cloud" @click="modalC = true">
                名单导入
              </at-button>
            </div>
            <at-table
              :columns="columns"
              :data="data"
              border
              style="margin-bottom: 50px"
            ></at-table>
            <at-pagination
              :total="100"
              style="float: right; margin: -30px 0 20px"
            ></at-pagination>
          </at-card>
        </at-tab-pane>
        <at-tab-pane label="营销商务合作" name="3" icon="icon-codepen">
          <p>Content of Tab Pane 3</p>
        </at-tab-pane>
        <at-tab-pane label="智能客服机器人" name="4" icon="icon-codepen">
          <p>Content of Tab Pane 3</p>
        </at-tab-pane>
        <at-tab-pane label="云呼叫中心" name="5" icon="icon-codepen">
          <p>Content of Tab Pane 3</p>
        </at-tab-pane>
      </at-tabs>
    </at-card>
    <at-modal
      v-model="modalA"
      title="客户语音呼入-分派部门"
      @on-confirm="modalA = false"
      @on-cancel="modalA = false"
    >
      <div class="modalA">
        <at-radio-group v-model="radioA">
          <at-radio-button label="客服部">客服部</at-radio-button>
          <at-radio-button label="技术部">技术部</at-radio-button>
          <at-radio-button label="支撑部">支撑部</at-radio-button>
          <at-radio-button label="市场部">市场部</at-radio-button>
          <at-radio-button label="财务部">财务部</at-radio-button>
          <at-radio-button label="综合部">综合部</at-radio-button>
        </at-radio-group>
      </div>
    </at-modal>
    <at-modal
      v-model="modalB"
      class="model"
      title="工单转移部门"
      @on-confirm="modalB = false"
      @on-cancel="modalB = false"
    >
      <at-input placeholder="请输入内容" prepend-button>
        <template slot="prepend">
          <span>工单号：</span>
        </template>
      </at-input>
      <div class="modalA" style="margin-top: 20px">
        <at-radio-group v-model="radioB">
          <at-radio-button label="语音通话部">语音通话部</at-radio-button>
          <at-radio-button label="短 信息 部">短 信息 部</at-radio-button>
          <at-radio-button label="投诉处理部">投诉处理部</at-radio-button>
          <at-radio-button label="商务合作部">商务合作部</at-radio-button>
          <at-radio-button label="客户信息部">客户信息部</at-radio-button>
          <at-radio-button label="综合查询部">综合查询部</at-radio-button>
        </at-radio-group>
      </div>
    </at-modal>
    <at-modal
      v-model="modalC"
      class="modalC"
      title="名单导入"
      @on-confirm="modalC = false"
      @on-cancel="modalC = false"
    >
      <i class="icon icon-upload-cloud"></i>
    </at-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioA: '',
      radioB: '',
      columns: [
        {
          title: '云客户编号',
          key: 'colA'
        },
        {
          title: '大客户名称',
          key: 'colB'
        },
        {
          title: '客户外呼时间',
          key: 'colC'
        },
        {
          title: '客户外呼次数',
          key: 'colD'
        },
        {
          title: '问题解决次数',
          key: 'colE'
        },
        {
          title: '分派部门',
          key: 'colF'
        },
        {
          title: '操作',
          render: h => {
            return h('div', [
              h(
                'ElButton',
                {
                  props: {
                    size: 'small',
                    type: 'text'
                  }
                },
                '查看'
              )
            ])
          }
        }
      ],
      data: [
        {
          colA: 'BJ04303',
          colB: '赵刚',
          colC: '2021.1',
          colD: '3',
          colE: '2',
          colF: '营销部'
        },
        {
          colA: 'BJ04302',
          colB: '李三',
          colC: '2021.1',
          colD: '3',
          colE: '1',
          colF: '营销部'
        },
        {
          colA: 'BJ04301',
          colB: '周洪',
          colC: '2021.1',
          colD: '1',
          colE: '2',
          colF: '营销部'
        },
        {
          colA: 'BJ04300',
          colB: '张一康',
          colC: '2021.1',
          colD: '1',
          colE: '1',
          colF: '营销部'
        },
        {
          colA: 'BJ04299',
          colB: '翟小霞',
          colC: '2021.1',
          colD: '4',
          colE: '2',
          colF: '营销部'
        },
        {
          colA: 'BJ04298',
          colB: '李梦凡',
          colC: '2021.1',
          colD: '1',
          colE: '4',
          colF: '营销部'
        },
        {
          colA: 'BJ04297',
          colB: '曲波蓝',
          colC: '2021.1',
          colD: '2',
          colE: '2',
          colF: '营销部'
        },
        {
          colA: 'BJ04296',
          colB: '李四平',
          colC: '2021.1',
          colD: '1',
          colE: '1',
          colF: '营销部'
        },
        {
          colA: 'BJ04295',
          colB: '王琦',
          colC: '2021.1',
          colD: '5',
          colE: '5',
          colF: '营销部'
        }
      ],
      modalA: false,
      modalB: false,
      modalC: false
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 70vw;
  margin: auto;
  margin-top: 20px;
  .icon {
    font-size: 80px;
    text-align: center;
    cursor: pointer;
  }
  .btn {
    .at-btn {
      margin-right: 10px;
      margin-bottom: 20px;
    }
  }
  .modalA {
    text-align: center;
    .at-btn {
      width: 120px;
      margin: 10px 10px;
    }
  }
  .model {
    /deep/.at-modal {
      width: 600px !important;
    }
  }
  .modalC {
    text-align: center;
  }
}
</style>
